在進入 shared style 之前，我們先來認識三個東西，Group、Frame、Section。

• Group（群組）：畫好的物件可以依據其屬性做群組，方便移動或縮放。
• Frame（框架）：設計 UI 的框架尺寸，例如各種尺寸的手機框架、桌機版的框架等等，再也不用問「我想設計XXX，尺寸要開多少？」的問題了。當然，你也可以開自己想要的任何尺寸的 Frame。
• Section（區塊）：層級高於 Group、Frame ，它非常適合用來管理設計稿，例如：註冊流程的設計稿可以集中放在一個 Section 裡面。
• 它們的層級關係是：Section 包 Frame 包 Group。
  

Frame 跟 Group 的差異：

• Frame 定位在舊版為 Constraint，新版為 Position，因為 Frame 有定位的功能，所以我們在設計的時候，比較常用 Frame，就把它當一般容器用的概念。
  好了，現在正式進入今天的主題：sheaed style。

shared style（分享樣式）

我們設計的樣式常常會想要複用，這時就會用到 shared style 的功能，shared style 也是進入 Design System 的入門磚。
常用的 shared style 有文字、顏色、效果等等，讓我們來看看如何製作 shared style 與如何套用。

• 文字
  設定樣式：

1. 把要設定的文字樣式先做好，包括字體、字級、字重等等。
2. 點選該文字，右側面板即會出現文字可用的各種屬性，找到 Typography，點選右上角的四個圓形 icon，就會彈出目前檔案中有設定的文字樣式（Text styles）。
3. 點選 Text styles 右邊的「＋」號，會再彈出設定面板：
   name：文字樣式的名稱
   description：文字樣式的說明。
4. 點擊 Create style，就完成一個文字樣式的設定。
5. 文字看不太懂是吧？上圖。
   

套用樣式：

1. 選取打好的文字，找到右側面板 Typography 。
2. 點擊右側的四個圓形 icon，出現 Text styles 面板。
3. 點選剛剛設定的文字樣式即可套用。
4. 老規矩，上圖。
   

修改樣式：

1. 不點選任何文字，右側面板會看到 Text styles，裡面就有我們設定過的文字樣式。
2. 點選文字樣式，再點擊右側面版的「edit style」icon ，會彈出文字樣式的內容。
3. 直接修改內容（也可以修改 Name、Description ），可即時看到文字的變化，修改完直接點選「X」即完成文字樣式的修改。
4. 上圖。
   

刪除樣式：
人總有做錯事後悔了想刪除，不是每一件事都能刪除重來，但樣式可以：
不點選任何文字，右側面板會看到 Text styles，裡面就有我們設定過的文字樣式，只要點選該文字樣式按右鍵：Delete style，完成。（這不用上圖了吧？堅持不上～）

• 顏色
  設定樣式：

1. 畫一個任意形狀，填滿你想要設定樣式的顏色。
2. 點選該形狀，右側面板找到「Fill」，會看到右方一樣有四個圓形的 icon。
3. 點擊四個圓形的 icon，會彈出設定面板，有看到兩個頁籤：Custome、Libraries：
   Custome：曾經自訂義或用過的顏色。
   Libraries：設定樣式的地方。
4. 點選 Libraries 頁籤裡面的下拉選單，點選 Local colors。
5. 點選 Libraries 右邊的「＋」，會彈出樣式設定視窗，要注意，視窗裡要點選「style」頁籤，才是我們要設定的地方，至於 Variable 是什麼？有緣再說吧！（相信我，會有緣的）。
6. 跟文字樣式設定一樣，填入樣式名稱（name）、樣式描述（description）。
7. 點擊 Create style，即可完成顏色樣式設定。
8. 我知道～我知道～上圖。
   

套用樣式：

1. 點選畫好的物件，在右側面板找到「Fill」。
2. 點擊 Fill 右邊的四個圓形 icon，會彈出 Libraries 視窗（也可以點擊 Fill 下方的色碼）
3. 在下拉選單 Local colors 下方就會出現剛剛設定好的顏色樣式。
4. 點選顏色樣式，套用完成。
5. 上～圖～圖～圖⋯⋯
   

修改樣式：

1. 不點選任何物件，右側面板會看到 Color styles，裡面就有我們設定過的顏色樣式。
2. 點選顏色樣式，右側會出現「edit style」的 icon ，就會彈出顏色樣式的內容。
3. 直接修改內容（可以修改 Name、Description、色碼），可即時看到顏色的變化，修改完直接點選「X」即完成樣式修改。
4. 上圖。
   

刪除樣式：
不點選任何物件，右側面板會看到 Color styles，裡面就有我們設定過的顏色樣式，只要點選該文字樣式按右鍵：Delete style，完成。（沒～有～圖～）

• 效果
  新增樣式：

1. 將想要的效果定義好（這裡以 Layer blur 為例）。
2. 點擊「Effects」右方的四個圓形 icon，會彈出已設定過的效果樣式。
3. 點擊「Effect Styles」右方的「＋」會彈出設定面板，即可設定效果樣式。
4. 點擊「Create style」，完成。
5. 圖來了。
   

效果的套用樣式、修改樣式、刪除樣式，都與文字、顏色一樣的操作模式，在這裡就不再贅述，相信各位聰明的捧油們稍微摸索一下就會了。

另外，你一定會想，那這些樣式可以分享給其他檔案或專案嗎？不急，我們會用其他方式來處理，用什麼方式呢？敬請耐心等候。當然，你也可以找找外掛喔！

明天我們要來講講 「Auto Layout」，這是 figma 的重頭戲！See You.